<!--数据概况-->
<template>
  <div class="data-profiling">
    <div class="title">数据概况</div>
    <div class="header">
      <div class="accumulate-activation">
        <div class="left">
          <div class="head">累计激活设备数</div>
          <div class="num">{{ devicesData.allActivateDevice }}</div>
        </div>
        <div class="right"></div>
      </div>
      <div class="accumulate-register">
        <div class="left">
          <div class="head">累计注册用户数</div>
          <div class="num">{{ devicesData.allRegistrant }}</div>
        </div>
        <div class="right"></div>
      </div>
      <div class="today-activation">
        <div class="left">
          <div class="head">今日激活设备数</div>
          <div class="num">{{ devicesData.tactivateDevice }}</div>
        </div>
        <div class="right">昨日：{{ devicesData.yactivateDevice }}</div>
      </div>
      <div class="today-register">
        <div class="left">
          <div class="head">今日注册数</div>
          <div class="num">{{ devicesData.tregistrant }}</div>
        </div>
        <div class="right">昨日：{{ devicesData.yregistrant }}</div>
      </div>
    </div>
    <div class="accumulate-activation-box">
      <div class="head">累计激活设备数</div>
      <div ref="accumulateActivationEcharts" style="width: 100%;height: 420px"></div>
    </div>
    <div class="accumulate-register-box">
      <div class="head">累计注册用户数</div>
      <div ref="accumulateRegisterEcharts" style="width: 100%;height: 420px"></div>
    </div>
    <div class="today-activation-box">
      <div class="head">今日激活设备数</div>
      <div ref="todayActivationEcharts" style="width: 100%;height: 420px"></div>
    </div>
    <div class="today-register-box">
      <div class="head">今日注册用户数</div>
      <div ref="todayRegisterEcharts" style="width: 100%;height: 420px"></div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/title'
import { situation } from '@/api/device-data/device'
export default {
  name: 'deviceActivation',
  data() {
    return {
      isComponentAlive: true,
      accumulateActivationEchartsX: [], // 累计激活设备数 X 轴数据
      accumulateActivationEchartsY: [], // 累计激活设备数 y 轴数据
      accumulateRegisterEchartsX: [], // 累计注册用户数 x 轴数据
      accumulateRegisterEchartsY: [], // 累计注册用户数 y 轴数据
      todayActivationEchartsX: [], // 今日激活设备数 x 轴数据
      todayActivationEchartsY: [], // 今日激活设备数 y 轴数据
      todayRegisterEchartsX: [], // 今日激活设备数 x 轴数据
      todayRegisterEchartsY: [], // 今日激活设备数 y 轴数据
      devicesData: {} // 设备数据
    }
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    this.isComponentAlive = false
    // 在组件销毁之前清理 ECharts 实例
    if (this.registerChart) {
      // 使用 echarts 的 dispose 方法清理图表实例
      this.registerChart.dispose()
      this.registerChart = null
    }
    if (this.activeEcharts) {
      // 使用 echarts 的 dispose 方法清理图表实例
      this.activeEcharts.dispose()
      this.activeEcharts = null
    }
  },
  methods: {
    init() {
      situation().then(res => {
        this.devicesData = res.data.data
        this.accumulateActivationEchartsX = []
        this.accumulateActivationEchartsY = []
        this.accumulateRegisterEchartsX = []
        this.accumulateRegisterEchartsY = []
        this.todayActivationEchartsX = []
        this.todayActivationEchartsY = []
        this.todayRegisterEchartsX = []
        this.todayRegisterEchartsY = []
        res.data.data.allActivateDeviceList.forEach(item => {
          this.accumulateActivationEchartsX.push(item.date)
          this.accumulateActivationEchartsY.push(item.value)
        })
        res.data.data.totalRegistrantList.forEach(item => {
          this.accumulateRegisterEchartsX.push(item.date)
          this.accumulateRegisterEchartsY.push(item.value)
        })
        res.data.data.tactivateDeviceList.forEach(item => {
          this.todayActivationEchartsX.push(item.date)
          this.todayActivationEchartsY.push(item.value)
        })
        res.data.data.tregistrantList.forEach(item => {
          this.todayRegisterEchartsX.push(item.date)
          this.todayRegisterEchartsY.push(item.value)
        })

        if (this.isComponentAlive) {
          // 创建 ECharts 实例
          const accumulateActivationEcharts = echarts.init(this.$refs.accumulateActivationEcharts)
          const accumulateRegisterEcharts = echarts.init(this.$refs.accumulateRegisterEcharts)
          const todayActivationEcharts = echarts.init(this.$refs.todayActivationEcharts)
          const todayRegisterEcharts = echarts.init(this.$refs.todayRegisterEcharts)
          window.addEventListener('resize', () => {
            accumulateActivationEcharts.resize()
            accumulateRegisterEcharts.resize()
            todayActivationEcharts.resize()
            todayRegisterEcharts.resize()
          })
          // 调用 setOption 方法配置图表
          accumulateActivationEcharts.setOption({
            xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                textStyle: {
                  color: 'rgba(1, 1, 1, 0.4)' // 设置 x 轴字体颜色
                }
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(1, 1, 1, 0.1)', // 设置 x 轴线颜色
                  width: 1.5
                }
              },
              axisTick: {
                show: false // 设置是否显示 X 轴的刻度线
              },
              data: this.accumulateActivationEchartsX
            },
            yAxis: {
              axisLabel: {
                textStyle: {
                  color: 'rgba(1, 1, 1, 0.4)' // 设置 y 轴字体颜色
                }
              },
              axisLine: {
                lineStyle: {
                  // type: 'solid',
                  color: 'rgba(1, 1, 1, 0.1)' // 设置 x 轴线颜色
                  // width: 1.5
                }
                // show: false
              },
              axisTick: {
                show: false // 设置是否显示 X 轴的刻度线
              },
              splitLine: {
                // show: false, // 设置是否显示 Y 轴的分隔线
                lineStyle: {
                  color: 'rgba(1, 1, 1, 0.1)'
                }
              }
            },
            tooltip: {
              // 自定义tooltip的文案
              formatter: (params) => {
                return `${params.name} 累计激活设备数：${params.value}`
              }
            },
            series: [{
              name: '数据',
              type: 'line',
              symbol: 'circle', // 设置圆点样式
              symbolSize: 6, // 设置圆点大小
              itemStyle: {
                color: '#275FE8', // 设置数据圆点颜色
                opacity: 1 // 设置圆圈透明度为1，即实心圆圈
              },
              lineStyle: {
                width: 1, // 设置数据线宽度为0，即去掉横线
                color: '#275FE8' // 设置数据线颜色
              },
              data: this.accumulateActivationEchartsY
              // areaStyle: {
              //   normal: {
              //     color: new echarts.graphic.LinearGradient(
              //       0, 0, 0, 1, // 参数表示渐变方向，(x1, y1, x2, y2) 分别表示渐变起点和终点的位置，(0,0)是图表的左上角，(0,1)是图表的左下角
              //       [
              //         { offset: 0, color: 'rgba(39, 95, 232, 0)' }, // offset 是渐变的偏移量，这里是从红色开始
              //         { offset: 1, color: 'rgba(39, 95, 232, 0)' } // 结尾处的颜色和透明度
              //       ])
              //   }
              // }
            }]
          })

          accumulateRegisterEcharts.setOption({
            xAxis: {
              axisLabel: {
                textStyle: {
                  color: 'rgba(1, 1, 1, 0.4)' // 设置 x 轴字体颜色
                }
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(1, 1, 1, 0.1)' // 设置 x 轴线颜色
                }
              },
              axisTick: {
                show: false // 设置是否显示 X 轴的刻度线
              },
              data: this.accumulateRegisterEchartsX
            },
            yAxis: {
              axisLabel: {
                textStyle: {
                  color: 'rgba(1, 1, 1, 0.4)' // 设置 y 轴字体颜色
                }
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(1, 1, 1, 0.1)' // 设置 x 轴线颜色
                }
              },
              axisTick: {
                show: false // 设置是否显示 X 轴的刻度线
              },
              splitLine: {
                // show: false // 设置是否显示 Y 轴的分隔线
                lineStyle: {
                  color: 'rgba(1, 1, 1, 0.1)'
                }
              }
            },
            tooltip: {
              // 自定义tooltip的文案
              formatter: (params) => {
                return `${params.name} 累计注册用户数：${params.value}`
              }
            },
            series: [{
              name: '数据',
              type: 'line',
              symbol: 'circle', // 设置圆点样式
              symbolSize: 6, // 设置圆点大小
              itemStyle: {
                color: '#275FE8', // 设置数据圆点颜色
                opacity: 1 // 设置圆圈透明度为1，即实心圆圈
              },
              lineStyle: {
                width: 1, // 设置数据线宽度为0，即去掉横线
                color: '#275FE8' // 设置数据线颜色
              },
              data: this.accumulateRegisterEchartsY
            }]
          })

          todayActivationEcharts.setOption({
            xAxis: {
              axisLabel: {
                textStyle: {
                  color: 'rgba(1, 1, 1, 0.4)' // 设置 x 轴字体颜色
                }
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(1, 1, 1, 0.1)' // 设置 x 轴线颜色
                }
              },
              axisTick: {
                show: false // 设置是否显示 X 轴的刻度线
              },
              data: this.todayActivationEchartsX
            },
            yAxis: {
              axisLabel: {
                textStyle: {
                  color: 'rgba(1, 1, 1, 0.4)' // 设置 y 轴字体颜色
                }
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(1, 1, 1, 0.1)' // 设置 x 轴线颜色
                }
              },
              axisTick: {
                show: false // 设置是否显示 X 轴的刻度线
              },
              splitLine: {
                // show: false // 设置是否显示 Y 轴的分隔线
                lineStyle: {
                  color: 'rgba(1, 1, 1, 0.1)'
                }
              }
            },
            tooltip: {
              // 自定义tooltip的文案
              formatter: (params) => {
                return `${params.name}时 今日激活设备数：${params.value}`
              }
            },
            series: [{
              name: '数据',
              type: 'line',
              symbol: 'circle', // 设置圆点样式
              symbolSize: 6, // 设置圆点大小
              itemStyle: {
                color: '#275FE8', // 设置数据圆点颜色
                opacity: 1 // 设置圆圈透明度为1，即实心圆圈
              },
              lineStyle: {
                width: 1, // 设置数据线宽度为0，即去掉横线
                color: '#275FE8' // 设置数据线颜色
              },
              data: this.todayActivationEchartsY
            }]
          })

          todayRegisterEcharts.setOption({
            xAxis: {
              axisLabel: {
                textStyle: {
                  color: 'rgba(1, 1, 1, 0.4)' // 设置 x 轴字体颜色
                }
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(1, 1, 1, 0.1)' // 设置 x 轴线颜色
                }
              },
              axisTick: {
                show: false // 设置是否显示 X 轴的刻度线
              },
              data: this.todayRegisterEchartsX
            },
            yAxis: {
              axisLabel: {
                textStyle: {
                  color: 'rgba(1, 1, 1, 0.4)' // 设置 y 轴字体颜色
                }
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(1, 1, 1, 0.1)' // 设置 x 轴线颜色
                }
              },
              axisTick: {
                show: false // 设置是否显示 X 轴的刻度线
              },
              splitLine: {
                // show: false // 设置是否显示 Y 轴的分隔线
                lineStyle: {
                  color: 'rgba(1, 1, 1, 0.1)'
                }
              }
            },
            tooltip: {
              // 自定义tooltip的文案
              formatter: (params) => {
                return `${params.name}时 今日注册用户数：${params.value}`
              }
            },
            series: [{
              name: '数据',
              type: 'line',
              symbol: 'circle', // 设置圆点样式
              symbolSize: 6, // 设置圆点大小
              itemStyle: {
                color: '#275FE8', // 设置数据圆点颜色
                opacity: 1 // 设置圆圈透明度为1，即实心圆圈
              },
              lineStyle: {
                width: 1, // 设置数据线宽度为0，即去掉横线
                color: '#275FE8' // 设置数据线颜色
              },
              data: this.todayRegisterEchartsY
            }]
          })
        }
      }).catch(err => {
        this.$message.error(err.message)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.data-profiling {
  .title {
    font-size: 18px;
    font-weight: 400;
    color: #252525;
    margin-bottom: 21px;
  }

  .header {
    display: flex;
    margin-bottom: 32px;

    .accumulate-activation,
    .accumulate-register,
    .today-activation,
    .today-register {
      width: 230px;
      background: rgba(39, 95, 232, 0.05);
      margin-right: 20px;
      padding: 15px;
      display: flex;
      justify-content: space-between;

      .left {
        margin-right: 20px;

        .head {
          font-size: 14px;
          font-weight: 400;
          color: #252525;
        }

        .num {
          font-size: 30px;
          font-weight: 500;
          color: #275FE8;
        }
      }

      .right {
        width: 77px;
        font-size: 14px;
        font-weight: 400;
        color: #252525;
        margin-top: 33px;
        float: right;
      }
    }

    // .accumulate-activation,
    // .accumulate-register {
    //   padding-right: 105px;
    // }
  }

  .accumulate-activation-box,
  .accumulate-register-box,
  .today-activation-box,
  .today-register-box {
    .head {
      font-size: 16px;
      font-weight: 400;
      color: #252525;
    }
  }
}
</style>
